<template>
  <transition
    enter-active-class="animated fadeInUp"
    leave-active-class="animated fadeOutDown"
  >
    <div class="ebook-popup-list" v-show="fontFamilyVisible">
      <div class="ebook-popup-title">
        <div class="ebook-popup-title-icon" @click="hide">
          <span class="iconfont">&#xe69b;</span>
        </div>
        <span class="ebook-popup-title-text">{{$t('book.selectFont')}}</span>
      </div>
      <div class="ebook-popup-list-wrapper">
        <div
          class="ebook-popup-item"
          v-for="(item, index) of fontFamilyList"
          :key="index"
          @click="selectFamily(item.font)"
        >
          <div class="ebook-popup-item-text" :class="{'selected': isSelected(item)}">{{item.font}}</div>
          <div class="ebook-popup-item-check">
            <span class="iconfont" v-if="isSelected(item)">&#xe763;</span>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { ebookMixin } from '../../utils/mixin'
import { FONT_FAMILY } from '../../utils/book'
import { setLocalStorage, saveFontFamily } from '../../utils/localStroage'

export default {
  name: 'EbookSettingFontPopup',
  mixins: [ebookMixin],
  data () {
    return {
      fontFamilyList: FONT_FAMILY
    }
  },
  methods: {
    selectFamily (font) {
      this.setDefaultFontFamily(font)
      saveFontFamily(this.fileName, font)
      if (font === 'Default') {
        this.currentBook.rendition.themes.font('Times New Roman')
      } else {
        this.currentBook.rendition.themes.font(font)
      }
    },
    isSelected (item) {
      return this.defaultFontFamily === item.font
    },
    hide () {
      this.setFontFamilyVisible(false)
    }
  },
  mounted () {
    // 调用原始的本地存储方法
    setLocalStorage(this.fileName, this.defaultFontFamily)
  }
}
</script>

<style lang="stylus" scoped>
@import "../../assets/styles/global.styl"
.ebook-popup-list
  position: absolute
  bottom: 0
  left: 0
  z-index: 300
  width: 100%
  background: white
  box-shadow: 0 px2rem(-4) px2rem(6) rgba(0, 0, 0, .1)
  .ebook-popup-title
    position: relative
    padding: px2rem(15)
    box-sizing: border-box
    border-bottom: px2rem(1) solid #b8b9bb;
    text-align: center
    center()
    width: 100%
    .ebook-popup-title-icon
      position: absolute
      left: px2rem(15)
      top: 0
      height: 100%
      font-size: px2rem(20)
      font-weight: bold
      center()
    .ebook-popup-title-text
      font-weight: bold
      font-size: px2rem(16)
  .ebook-popup-list-wrapper
    .ebook-popup-item
      display: flex
      padding: px2rem(15)
      font-size: px2rem(14)
      .ebook-popup-item-text
        flex: 1
        text-align: left
      .ebook-popup-item-check
        flex: 1
        text-align: right
        color: #346cb9
        font-weight: bold
</style>
